<template>
  <div>
    <p>eat: {{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = '🍜'">面条</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
        a: 1,
        b: 2
      },
    })

    // !#1 直接深度监听 obj 这个 reactive
    /* watch(obj, () => {
      console.log(1)
    }) */
    // !#2 缩小监听范围（性能好一些），obj.hobby 也是一个 reactive
    /* watch(obj.hobby, () => {
      console.log(1)
    }) */
    // !#3 会把 obj.hobby 当做普通值进行监听，只有对 obj.hobby 本身的修改才会触发监听
    /* watch(() => obj.hobby, () => {
      console.log(1)
    }) */
    // !#4 对 obj.hobby 本身的修改和对 obj.hobby 内部数据的修改都会触发监听（上当与 #2 和 #3 的结合）
    watch(() => obj.hobby, () => {
      console.log(1)
    }, {
      deep: true
    })
    // !#5 再缩小范围，如果要监听普通（什么是普通值：既不是 reactive 也不是 ref），() => 普通值
    /* watch(() => obj.hobby.eat, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }) */
    return {
      obj
    }
  }
}
</script>

